<template>
	<view class="category">
		<view class="header">
			<text class="title">筛选列表</text>
			<view class="search-icon" @click="jumpToSearchFn()">
				<image class="img" src="../../static/assets/category-search.png" mode=""></image>
			</view>
		</view>

		<view class="section">
			<view class="left">
				<ul>
					<li v-for="(item,index) in category_list" :key="item.id" @click="SelectCategoryFn(index)"
						:class="{active: index === SelectCategory}">{{item.category_text}}
					</li>
				</ul>
			</view>
			<view class="right">
				<view class="title">
					<image class="img" src="../../static/assets/categroy-sel.png" mode=""></image>
					<text class="text">精选推荐</text>
				</view>
				<ul class="list">
					<li v-for="(item,index) in shop_list" :key="item.shop_id" @click="jumpToDetailFn(index)">
						<image class="img" :src="item.shop_img" mode=""></image>
						<text class="shop-name">{{item.shop_text}}</text>
					</li>
				</ul>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 点击分类索引
				SelectCategory: 0,
				// 筛选页相应的id
				sift_index: "",
				category_list: [{
						id: 1,
						category_text: "精选"
					},
					{
						id: 2,
						category_text: "男装"
					},
					{
						id: 3,
						category_text: "女装"
					},
					{
						id: 4,
						category_text: "鞋子"
					},
					{
						id: 5,
						category_text: "箱包"
					},
					{
						id: 6,
						category_text: "其他"
					},
				],

				shop_list: [{
						shop_id: 1,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/614713/2022/0806/169/cbffe446-a1dc-4b12-a2b9-ceef818e8b8f_262x262_90.jpg",
						shop_text: "连衣裙",
					},
					{
						shop_id: 2,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/609438/2024/0307/73/00afdfe9-6f56-4dca-8389-ac9e7dbe35d0_262x262_90.jpg",
						shop_text: "T恤",
					},
					{
						shop_id: 3,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/610259/2024/0804/56/76e14234-b882-4930-9b3a-475da8938217_262x262_90.jpg",
						shop_text: "衬衫",
					},
					{
						shop_id: 4,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvop/00604101/10028906/1938941923-2828056256393854976-2828056256393854978-1_262x262_90.jpg",
						shop_text: "外套",
					},
					{
						shop_id: 5,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/655481/2024/1016/158/5c4e5651-cfbb-468a-b4e3-0b5c81b13f46_262x262_90.jpg",
						shop_text: "休闲裤",
					},
					{
						shop_id: 6,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2024/08/09/51/0436ffc4-902d-4e00-81be-80b0b8ced3f2_262x262_90.jpg",
						shop_text: "牛仔裤",
					},
					{
						shop_id: 7,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/643496/2024/0904/28/59546cc0-1a06-4380-a141-83a1f3ac7d9f_262x262_90.jpg",
						shop_text: "套装",
					},
					{
						shop_id: 8,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/618791/2024/0422/157/beda7850-cfd8-4032-a1b0-0e2db647e803_262x262_90.jpg",
						shop_text: "休闲鞋",
					},
					{
						shop_id: 9,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634503/2023/0413/137/21bdb328-bca4-4996-af42-d473cf11bb93_262x262_90.jpg",
						shop_text: "斜挂包",
					},
					{
						shop_id: 10,
						shop_img: "https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2023/09/30/180/8d6a94fa-80a0-4119-966d-3fedba7ca938_262x262_90.jpg",
						shop_text: "卫衣",
					},
				]
			};
		},
		methods: {
			// 点击分类索引方法
			SelectCategoryFn(id) {
				this.SelectCategory = id;
			},
			jumpToSearchFn() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			jumpToDetailFn(sift_index) {
				uni.navigateTo({
					url: `/pages/sift/sift?id=${sift_index}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';

	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
		}
	}

	// 隐藏横向滚动条
	::-webkit-scrollbar {
		display: none;
	}

	.category {
		width: 100%;

		.header {
			padding: 40rpx 50rpx;
			text-align: center;
			border-bottom: 2rpx solid #ccc;
			color: $color;
			text-align: center;
			position: relative;

			.title {
				font-weight: 800;
				font-size: 35rpx;
			}

			.search-icon {
				width: 65rpx;
				height: 65rpx;
				box-shadow: 0 4rpx 10rpx $boxShadow;
				border-radius: 15rpx;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translate(-50%, -50%);

				.img {
					width: 50rpx;
					height: 50rpx;
					margin-top: 8rpx;
				}
			}
		}

		.section {
			width: 100%;
			display: flex;

			.left {
				background-color: $bagroundColor;
				width: 250rpx;
				overflow: hidden;

				ul {
					margin-top: 90rpx;
					box-sizing: border-box;

					li {
						padding: 30rpx 80rpx;
						margin-bottom: 50rpx;
						box-sizing: border-box;

						&.active {
							background-color: #fbfafa;
							border-left: 8rpx solid $bagroundColor;
							padding: 30rpx 72rpx;
							color: $color;
						}
					}
				}
			}

			.right {
				width: calc(100% - 250rpx);
				background-color: #f9f8f8;
				padding: 55rpx 20rpx;
				height: 1000rpx;
				overflow-y: scroll;

				.title {
					text-align: center;
					display: flex;
					justify-content: center;
					// align-items: center;
					// padding-bottom: 20rpx;

					.img {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}

					.text {
						color: #515151;
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					text-align: center;

					li {
						margin: 40rpx 10rpx;

						.img {
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}

						.shop-name {
							margin-top: 30rpx;
							display: block;
							font-size: 35rpx;
							width: 200rpx;
							overflow: hidden;
							/* 超出隐藏 */
							display: -webkit-box;
							/* 设置为 flexbox */
							-webkit-box-orient: vertical;
							/* 垂直显示 */
							-webkit-line-clamp: 1;
							/* 显示的行数 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}
					}
				}
			}
		}

	}
</style>